<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="./Package/element/element.css">
		<script src="./Package/js/vue.js"></script>
		<script src="./Package/element/element.js"></script>
	</head>

	<body>
		<div id="app">

			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item style="padding-left: 67%;margin: 10px;">
					<el-button type="primary" @click="onSend">短信定位</el-button>
				</el-form-item>
				<el-form-item label="来电号码" style="width: 49%;display: inline-block;">
					<el-input v-model="phone" placeholder="请输入来电号码" disabled></el-input>
				</el-form-item>
				<el-form-item label="来电人姓名" style="width: 47%;display: inline-block;">
					<el-input v-model="form.callName" placeholder="请输入来电人姓名"></el-input>
				</el-form-item>
				<el-form-item label="报警位置">
					<el-select v-model="form.sectionName" placeholder="请选择路段名称"
						style="width: 33%;display: inline-block;">
						<el-option v-for="item in roadlist" :label="item.roadName" :value="item.roadName"></el-option>
					</el-select>
					--
					<el-input v-model="form.kil" placeholder="请输入公里数" style="width: 28%;display: inline-block;">
					</el-input>
					--
					<el-input v-model="form.meter" placeholder="请输入米数" style="width: 28%;display: inline-block;">
					</el-input>
				</el-form-item>
				<el-form-item label="警情类型">
					<el-cascader v-model="form.pgenre" @change="pgenrechange" :show-all-levels="false" ref="tree"
						:options="typelist" :props="props" clearable style="width: 96%;"></el-cascader>
				</el-form-item>
				<el-form-item label="方向" style="width: 50%;display: inline-block;">
					<el-select v-model="form.directionTypeName" placeholder="请选择方向">
						<el-option label="上行" value="上行"></el-option>
						<el-option label="下行" value="下行"></el-option>
						<el-option label="东向西" value="东向西"></el-option>
						<el-option label="西向东" value="西向东"></el-option>
						<el-option label="南向北" value="南向北"></el-option>
						<el-option label="北向南" value="北向南"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="警情详情" style="width: 96%;">
					<el-input type="textarea" v-model="form.pdetails" :rows="5" placeholder="请输入警情详情"></el-input>
				</el-form-item>
				<el-form-item style="padding-left: 59%;margin-top: 55px;">
					<el-button type="primary" @click="onSubmit">保存</el-button>
					<el-button @click="close">取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</body>
	<!-- ip -->
	<script src="./Package/js/config.js"></script>
	<script src="./Package/js/jquery-1.7.2.js"></script>
	<script src="./Package/js/base64.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				form: {
					"callName": "", //来电人姓名
					"sectionName": '', //路段名称
					"directionTypeName": "", //方向名称
					"kil": '',
					"meter": '',
					"lon": '',
					"lat": '', //维度
					"pcategory": "", //警情类型
					"pgenre": "", //警情类别
					"pdetails": "加强巡逻" //警情详情
				},
				phone: '',
				roadlist: [],
				props: {
					multiple: true,
					label: 'name',
					value: 'name',
				},
				options: [],
				typelist: [],
				lastsel: [],
			},

			mounted() {
				this.phone = this.getQueryString('phone')
				this.form.id = this.getQueryString('id')
				if (this.getQueryString('lon')) {
					this.form.lon = this.getQueryString('lon')
					this.form.lat = this.getQueryString('lat')
					this.form.sectionName = Base64.decode(this.getQueryString('sectionName'))
					this.form.kil = this.getQueryString('kil')
				}

				console.log(this.phone, this.form.id);
				this.getlist();
			},
			methods: {
				getlist() {
					console.log(3544)
					$.ajax({
						type: 'get',
						url: httpurl + '/basicInfo/basicInfoRoad/getRoadAll',
						dataType: 'json',
						headers: {
							Authorization: localStorage.getItem('token')
						},
						success: function(data) {
							console.log(data, '高速')
							if (data.code == 200) {
								vm.roadlist = data.data;
							}
						},
						error: function(err) {
							// 失败的回调
						}
					})
					$.ajax({
						type: 'get',
						url: httpurl + '/event/eventPcategory/list',
						dataType: 'json',
						headers: {
							Authorization: localStorage.getItem('token')
						},
						success: function(data) {
							console.log(data, '类型')
							if (data.code == 200) {
								vm.typelist = handleTree(data.data, "id", "pId");
							}
						},
						error: function(err) {
							// 失败的回调
						}
					})
				},
				//				点击保存按钮
				onSubmit() {
					var arr = [];
					if (this.form.pgenre[0].length == 2) {
						arr.push(this.form.pgenre[0][0])
						this.form.pgenre.forEach((item) => {
							arr.push(item[1])
						});
					} else if (this.form.pgenre[0].length == 3) {
						arr.push(this.form.pgenre[0][0])
						arr.push(this.form.pgenre[0][1])
						this.form.pgenre.forEach((item) => {
							arr.push(item[2])
						});
					}
					this.form.pgenre = arr.join(',')
					console.log(this.form.pgenre);
					if (this.form.lon == '' || this.form.lat == '') {
						$.ajax({
							type: 'post',
							url: httpurl + '/event/manager/locationAll/getLngAndLatByKm',
							dataType: 'json',
							data: JSON.stringify({
								"speedName": this.form.sectionName, //高速名称
								"kill": this.form.kil //公里数
							}),
							contentType: "application/json",
							headers: {
								Authorization: localStorage.getItem('token')
							},
							success: function(data) {
								console.log(data, '经纬度')
								if (data.code == 200) {
									vm.form.lon = data.data.longNumber;
									vm.form.lat = data.data.latNumber;
									vm.savework();
								} else {
									vm.$message({
										message: '位置信息错误',
										type: 'error'
									});
								}
							},
							error: function(err) {
								// 失败的回调
							}
						})
					} else {
						this.savework();
					}

				},
				//				保存工单
				savework() {
					console.log(this.form)
					$.ajax({
						type: 'post',
						url: httpurl + '/event/eventOrder/saveOrder',
						dataType: 'json',
						data: JSON.stringify(this.form),
						contentType: "application/json",
						headers: {
							Authorization: localStorage.getItem('token')
						},
						success: function(data) {
							console.log(data)
							if (data.code == 200) {
								vm.$message({
									message: '保存成功',
									type: 'success'
								});
								vm.close()
								window.parent.workover();
							} else {
								vm.$message({
									message: data.msg,
									type: 'error'
								});
							}
						},
						error: function(err) {
							// 失败的回调
						}
					})
				},
				onSend() {
					$.ajax({
						type: 'get',
						url: httpurl + '/event/eventOrder/messageLocation/' + this.form.id,
						dataType: 'json',
						headers: {
							Authorization: localStorage.getItem('token')
						},
						success: function(data) {
							console.log(data)
							if (data.code == 200) {
								vm.$message({
									message: '发送成功',
									type: 'success'
								});
								vm.close();
							} else {
								vm.$message({
									message: '发送失败',
									type: 'error'
								});
							}
						},
						error: function(err) {
							// 失败的回调
						}
					})
				},
				//类型发生改变时
				pgenrechange(val) {
					console.log(val, this.form.pgenre, this.lastsel)

					//是否与上次的类型相同
					let changeFlag = false;
					let changeItem = null;
					if (this.lastsel.length === 0) {
						this.form.pgenre = val;
					} else {
						//与原数组比对
						this.form.pgenre.forEach((item) => {
							//与原数组的类型相同
							if (item[0] !== this.lastsel[0][0]) {
								changeFlag = true;
								changeItem = item;
							}
						});
					}
					if (changeFlag) {
						//上次是system,那么这次是domain
						if (this.lastsel[0][0] === 'system') {
							this.form.pgenre = this.form.pgenre.filter((item) => {
								return (item[0] !== 'system');
							});
						} else {
							this.form.pgenre = [];
							this.form.pgenre.push(changeItem);
						}
					}
					this.lastsel = this.form.pgenre;
				},
				close() {
					//当你在iframe页面关闭自身时
					var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
					parent.layer.close(index); //再执行关闭 
				},
				getQueryString(name) {
					var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
					var r = window.location.search.substr(1).match(reg);
					if (r != null) return unescape(r[2]);
					return null;
				}
			},
		})
		//		变成树状
		function handleTree(data, id, parentId, children) {
			let config = {
				id: id || 'id',
				parentId: parentId || 'parentId',
				childrenList: children || 'children'
			};

			var childrenListMap = {};
			var nodeIds = {};
			var tree = [];

			for (let d of data) {
				let parentId = d[config.parentId];
				if (childrenListMap[parentId] == null) {
					childrenListMap[parentId] = [];
				}
				nodeIds[d[config.id]] = d;
				childrenListMap[parentId].push(d);
			}

			for (let d of data) {
				let parentId = d[config.parentId];
				if (nodeIds[parentId] == null) {
					tree.push(d);
				}
			}

			for (let t of tree) {
				adaptToChildrenList(t);
			}

			function adaptToChildrenList(o) {
				if (childrenListMap[o[config.id]] !== null) {
					o[config.childrenList] = childrenListMap[o[config.id]];
				}
				if (o[config.childrenList]) {
					for (let c of o[config.childrenList]) {
						adaptToChildrenList(c);
					}
				}
			}
			return tree;
		}
	</script>

</html>
